import 'dart:developer';

import 'package:FlutterDemo/bean/beans_factory.dart';
import 'package:flutter/material.dart';

/// 矩阵变换的PageView，特效示例
class SampleMatrixTransformPageViewWidget extends StatefulWidget {
  const SampleMatrixTransformPageViewWidget({Key? key}) : super(key: key);

  @override
  _SampleMatrixTransformPageViewWidgetState createState() => _SampleMatrixTransformPageViewWidgetState();
}

class _SampleMatrixTransformPageViewWidgetState extends State<SampleMatrixTransformPageViewWidget> {
  List<String> imgList = [];

  // viewpager高度
  double _height = 230.0;
  late PageController _pageController;

  var _currentPageValue = 0.0;

  // 缩放系数
  double _scaleFactor = .8;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(viewportFraction: 0.9);
    imgList = BeansFactory.instance.buildSampleGankioGirList();
    _pageController.addListener(() {
      setState(() {
        _currentPageValue = _pageController.page!;
      });
    });
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _height,
      margin: EdgeInsets.only(top: 10),
      child: PageView.builder(
        itemBuilder: (context, index) => _buildImageItem(index),
        itemCount: imgList.length,
        controller: _pageController,
      ),
    );
  }

  _buildImageItem(int index) {
    var matrix4 = Matrix4.identity();
    var currentPageFloor = _currentPageValue.floor();
    if (index == currentPageFloor) {
      // 处理当前条目
      var currScale = 1 - (_currentPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      log("flag-1 currScale = $currScale , currentPageFloor = $currentPageFloor , index = $index , currTrans = $currTrans");
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == currentPageFloor + 1) {
      // 处理右边条目
      var currScale = _scaleFactor + (_currentPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      log("flag-2 currScale = $currScale , currentPageFloor = $currentPageFloor , index = $index , currTrans = $currTrans");
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == currentPageFloor - 1) {
      // 处理左边条目
      var currScale = 1 - (_currentPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      log("flag-3 currScale = $currScale , currentPageFloor = $currentPageFloor , index = $index , currTrans = $currTrans");
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      // 不在屏幕显示 的item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
    }

    // return Container(
    //   margin: EdgeInsets.only(left: index > 0 ? 20 : 0),
    //   decoration: BoxDecoration(
    //       borderRadius: BorderRadius.circular(12),
    //       image: DecorationImage(
    //           image: NetworkImage(imgList[index % imgList.length]),
    //           fit: BoxFit.fill)),
    // );

    return Transform(
      transform: matrix4,
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(image: NetworkImage(imgList[index % imgList.length]), fit: BoxFit.fill)),
        ),
      ),
    );
  }
}
